<template>
	<div class="flex">
		<img :src="avatar" alt="" class="w-12 h-12 mr-4 rounded-full" />
		<div>
			<p>{{ user }}</p>
			<p class="text-gray-600 text-sm">{{ time }}</p>
		</div>

		<span class="ml-auto">
			<svg
				xmlns="http://www.w3.org/2000/svg"
				class="h05 w-5 text-gray-500"
				viewBox="0 0 20 20"
				fill="currentColor"
			>
				<path
					d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
				/>
			</svg>
		</span>
	</div>
	<p class="text-gray-600 py-4">
		{{ content }}
	</p>
</template>

<script setup>
/**
 * 定义prop属性：
 * user:用户昵称
 * avatar:用户头像
 * time:用户回复时间
 * content:用户回复内容
 */
defineProps(['user', 'avatar', 'time', 'content'])
</script>

<style></style>
